<template>
  <div class="personnel-administration">
    <div class="personnel-administration__content">
      <div class="item title">
        <span></span>
        <span>在职员工</span>
        <span>中高层管理干部人数</span>
        <span>劳动合同签订率</span>
        <span>总合同数</span>
        <span>归档合同数</span>
        <span>签约及时率</span>
        <span>归档及时率</span>
      </div>
      <div v-for="(item,i) in data" :key="i" class="item">
        <span class="cityName">{{item.cityName}}</span>
        <span>{{item.ygzrs}}</span>
        <span>{{item.zgcglgbrs}}</span>
        <span>{{item.ldhtqyl + '%'}}</span>
        <span>{{item.zhts}}</span>
        <span>{{item.gdhts}}</span>
        <span>{{item.qyjsl + '%'}}</span>
        <span>{{item.gdjsl + '%'}}</span>
      </div>
    </div>
    <div class="personnel-administration__select">
      <div class="personnel-administration__select-city">
        <el-select v-model="city" size="mini" @change="getPieData">
            <el-option
              v-for="(item, i) in cityList"
              :key="i"
              :label="item"
              :value="item"
              >
            </el-option>
          </el-select>
      </div>
    </div>
    <div class="personnel-administration__chart">
      <ve-pie :data="chartData" :settings="pieSettings" :extend="pieExtend" width="100%" height="10rem"></ve-pie>
      <ve-pie :data="chartData2" :settings="pieSettings" :extend="pieExtend2" width="100%" height="10rem"></ve-pie>
    </div>
  </div>
</template>
<script>
import { getRsxzOne, getRsxzTwo } from 'src/api/api'
import { formatDate, formatFontSize } from 'js/utils'
import { Select, Option } from 'element-ui'
import Vpie from 'v-charts/lib/pie.common'
import storage from 'good-storage'
export default {
  components: {
    [Select.name]: Select,
    [Option.name]: Option,
    [Vpie.name]: Vpie,
  },
  data() {
    return {
      dayTime: formatDate('yyyy-mm', new Date()),
      data: [],
      cityList: storage.get('cityList'),
      city: storage.get('cityList')[0],
      pieSettings: {
        radius: formatFontSize(0.45),
        // offsetY: 100,
        // labelLine: {
        //   length: 5,
        //   length2: 5,
        // },
        label: {
          show: false,
          // position: 'inner',
          // color: '#0B153A',
          fontSize: formatFontSize(0.1)
        }
      },
      pieExtend: {
        title: {
          text: '徽章人数',
          textStyle: {
            color: '#fff',
            fontSize: formatFontSize(0.10),
          },
          left: '15%',
          bottom: '10%',
        },
        tooltip: {
          show: true,
          position: ['30%', '50%'],
        },
        legend: {
          textStyle: {
            color: '#fff',
            fontSize: formatFontSize(0.12),
          },
          selectedMode: false,
          orient: 'vertical',
          align: 'left',
          right: 0, 
          // left: 0,
          // top: 40,
          bottom: '40%',
          itemWidth: formatFontSize(0.12),
          itemHeight: formatFontSize(0.06),
        },
        series: {
          center: ['25%', '40%']
        },
        grid: {  
          left: '0',  
          right: '0',
          top: '20%',
          bottom: '0',  
        },
        color: ['#0A8CFF', '#FFEA00'],
      },
      pieExtend2: {
        title: {
          text: '职称人数',
          textStyle: {
            color: '#fff',
            fontSize: formatFontSize(0.10),
          },
          left: '25%',
          bottom: '10%',
        },
        tooltip: {
          show: true,
          position: ['30%', '50%'],
        },
        legend: {
          textStyle: {
            color: '#fff',
            fontSize: formatFontSize(0.12),
          },
          selectedMode: false,
          orient: 'vertical',
          align: 'left',
          right: 0, 
          // left: 0,
          // top: 20,
          bottom: '40%',
          itemWidth: formatFontSize(0.12),
          itemHeight: formatFontSize(0.06),
        },
        series: {
          center: ['35%', '40%']
        },
        grid: {  
          left: '0',  
          right: '0',
          top: '20%',
          bottom: '0',  
        },
        color: ['#0A8CFF', '#0E962A', '#FFEA00'],
      },
      chartData: {
        columns: ['name', 'value'],
        rows: []
      },
      chartData2: {
        columns: ['name', 'value'],
        rows: []
      }
    }
  },
  mounted() {
    this.getData()
    this.getPieData()
  },
  methods: {
    getData() {
      getRsxzOne().then(res=> {
        this.data = res.data
      })
    },
    getPieData() {
      const params = {
        city: this.city
      }
      getRsxzTwo(params).then(res=>{
        this.chartData.rows = [
          { 'name': '金色微笑徽章比例', 'value': res.data.jshzrs },
          { 'name': '银色微笑徽章比例', 'value': res.data.yshzrs }
        ]
        this.chartData2.rows = [
          { 'name': '高级职称比例', 'value': res.data.gjzcrs },
          { 'name': '中级职称比例', 'value': res.data.zjzcrs },
          { 'name': '初级职称比例', 'value': res.data.cjzcrs }
        ]
      })
    }
  },
}
</script>
<style lang="scss">
.personnel-administration {
  padding: 10px 0px 10px;
  &__select {
    text-align: right;
    padding: 6px 20px 5px 0;
    font-size: 14px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: #AAECFF;
    .el-select{
      .el-input__inner {
        // width: 150px;
        border: 0;
        border-radius: 0;
        background:rgba(11,21,58,1);
        box-shadow:1px 1px 0px 0px rgba(255,255,255,0.25), 0px 2px 4px 0px rgba(0, 0, 0, 1);
        color: #AAECFF;
        font-size: 14px;
      }
      .el-input__icon {
        color: #AAECFF;
        font-size: 14px;
      }
    }
    &-city {
      .el-select {
        width: 100px;
      }
    }
    .el-checkbox {
      color: #AAECFF;
    }
    .el-checkbox__input.is-checked+.el-checkbox__label {
      color: #AAECFF;
    }
    .el-checkbox__inner {
      border-radius: 50%;
    }
  }
  &__content {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    // height: 150px;
    width: 100%;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      align-content: center;
      // width: 7%;
      // height: 150px;
      span {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        border: 0.5px solid #6A97AA;
        width: 50px;
        height: 30px;
        line-height: 15px;
        font-size: 12px;
        color: #5BDA75;
        text-align: center;
        // padding-top: 10px;
        // vertical-align: middle;
      }
      .cityName {
        color: #6A97AA;
        font-size: 12px;
      }
    }
    .title {
      span {
        width: 70px;
        color: #6A97AA;
        font-size: 10px;
      }
    }
  }
  &__chart {
    display: flex;
  }
}
</style>